
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,Image,
  Dimensions,TouchableOpacity,FlatList
} from 'react-native';
import TopBar from '../../bar/TopBar'
import BASEURL from '../../api/api'
import Loading from '../../common/Loading'
import Toast, {DURATION} from 'react-native-easy-toast'
import NoData from '../../common/NoData'
var {height, width} = Dimensions.get('window');
const dismissKeyboard = require('dismissKeyboard');
import DeviceStorage from '../../common/DeviceStorage'
import SearchView from '../../common/SearchViewN'
export default class StationInfo extends Component {
  static navigationOptions = ({ navigation }) =>{
    return{
      headerTitle:<TopBar title='电站信息' navigation = {navigation}/>,
      headerLeft:null,
    }
  };
  constructor(props){
    super(props)
    this.state = ({
      emp:{},
      loading:true,
      areaCode:'',
    })
  }
  componentWillMount(){
    DeviceStorage.get('areaCode').then((areaCode)=>{
        if(areaCode){
          this.setState({
            areaCode:areaCode
          })
          this.fetchOrgData(areaCode)
        } 
    })
  }
  componentDidMount(){

  }
  _stationList(item){
    console.log('areaCode',item.areaCode)
    if(this.props.navigation){
      this.props.navigation.push('stationList',{areaCode:item.areaCode})
    }
  }
  //从网络获取数据
  fetchOrgData(areaCode){
    fetch(BASEURL+'getEmpNumByAreaCode?areaCode='+areaCode)
    .then(res=>res.json())
    .then(result=>{
      console.log('res',result)
      if(result.falg){
        this.setState({
          data:result.empNumList,
          loading:false,
        })
      }
    })
  }
  //搜索
  _empSearch(val){
    if(this.props.navigation && val){
      this.props.navigation.push('stationList',{hyName:val,areaCode:this.state.areaCode})
    }
  }
  _separator = () => {
    return <View style={{height:1,backgroundColor:'#f0f0f0',
    marginLeft:20,marginRight:20,}}/>;
  }
  _keyExtractor = (item, index) => index.toString();
  _renderItem=({item})=>{
    return(
      <TouchableOpacity style={styles.row} onPress={()=>{this._stationList(item)}}>
        <View style={styles.orgLeft}>
            <Image source={require('../../images/city-img.png')}/>
            <Text style={{fontSize:16,color:'#333',marginLeft:5}}>{item.areaName}</Text>
        </View>
        <View style={styles.orgRight}>
            <Text style={styles.numText}>{item.empNumber}</Text>
            <Text style={{fontSize:14,color:'#666'}}>座</Text>
            <Image style={{marginLeft:5}} source={require('../../images/arrow.png')}/>
        </View>
      </TouchableOpacity>
    )
  }
  render(){
    return(
      <View style={styles.container}>
        <SearchView  placeholder='输入水电站名称进行搜索' search={(val)=>this._empSearch(val)}/>
        <View style={{height:10,backgroundColor:'#f0f0f0'}}></View>
        {this.state.loading?
        <Loading/>
        :
        <FlatList
            data={this.state.data}
            keyExtractor={this._keyExtractor}
            ItemSeparatorComponent={this._separator}
            renderItem={this._renderItem}
        />
        }
        <Toast ref="toast"/>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  numText:{
    color:'#FF8E10',
    fontSize:18,
    marginRight:5,
  },
  orgLeft:{
    flexDirection:'row',
    alignItems:'center',
  },
  orgRight:{
    flexDirection:'row',
    alignItems:'center',
  },
  row:{
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    paddingLeft:20,
    paddingRight:20,
    paddingTop:10,
    paddingBottom:10,
  },    
  container:{
    flex:1,
  },
})